<template>
    <div class="dd">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>个人信息</span>
                    <div>
                        <el-button class="button" @click="opendiog">编辑网站信息</el-button>
                    </div>
                </div>
            </template>
            <div class="cardbody">
                <div class="touxiang">
                    <div>背景图</div>
                    <el-image style="width: 150px; height: 100px" :src="siteinfo.bkimg" fit="corver" />
                </div>
                <div class="touxiang">
                    <div>博客名字:</div>
                    <div>{{ siteinfo.name }}</div>
                </div>
                <div class="touxiang">
                    <div>签名:</div>
                    <div>{{ siteinfo.sign }}</div>
                </div>
                <div class="touxiang ">
                    <div>公告:</div>
                    <div class="xx">{{ siteinfo.notice }}</div>
                </div>

            </div>
        </el-card>
        <dialogg :istoshow="isshowchange" title="编辑网站信息" @cansol="cansol()" width="30%">
            <template #body>
                <el-form :model="updatainfo" label-width="80px">
                    <el-form-item label="背景图:">
                        <upload :limit="1" :multiple="true" :height="80" :width="80" v-model:imglist="updatainfo.bkimg">
                        </upload>
                    </el-form-item>
                    <el-form-item label="网站名字:">
                        <el-input v-model="updatainfo.name" />
                    </el-form-item>
                    <el-form-item label="签名:">
                        <el-input v-model="updatainfo.sign" />
                    </el-form-item>
                    <el-form-item label="公告:">
                        <el-input v-model="updatainfo.notice" />
                    </el-form-item>
                </el-form>
            </template>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="cansol()">
                        取消
                    </el-button>
                    <el-button type="primary" @click="sub()">
                        确定
                    </el-button>
                </span>
            </template>
        </dialogg>
    </div>
</template>

<script setup>
import { ref ,inject,onMounted } from 'vue';
import { getQiniuToken } from "@/api/users.js"
import upload from "@/components/upload.vue"
import dialogg from '@/components/dialog.vue';
import { useBaseStore } from "@/store/Base.js"
import {updataconfig,getconfig } from "@/api/config.js"
import { uploadqiniu } from "@/util/index.js"
import { deleteimg } from "@/api/friend.js"
let isshowchange = ref(false);
let baseStore = useBaseStore()

let reload = inject('reload')
let corver=""
let siteinfo = ref({
    name: "博客名字",
    sign: "大师大师大大萨",
    notice: "大师大师大大萨大萨滴答滴答滴答滴答哒哒哒哒dsdas哒",
    bkimg: "",
})
const updatainfo = ref({
    name: "博客名字",
    sign: "大师大师大大萨",
    notice: "大师大师大大萨大萨滴答滴答滴答滴答哒哒哒哒dsdas哒",
    bkimg: [],
})
function opendiog() {
    updatainfo.value.siteName = siteinfo.value.siteName
    updatainfo.value.sign = siteinfo.value.sign
    updatainfo.value.notice = siteinfo.value.notice
    updatainfo.value.bkimg = [{
        url: siteinfo.value.bkimg,
        name: "背景图"
    }]
    corver = siteinfo.value.bkimg
    isshowchange.value = true
}
function cansol() {
    isshowchange.value = false
}
async function sub() {
    if (updatainfo.value.name == "" || updatainfo.value.sign == "" || updatainfo.value.notice == "" || updatainfo.value.bkimg.length == 0) {
        ElMessage({
            showClose: true,
            message: '请填写数据',
            type: 'warning',
        })
        return
    }else{
        let newimg = ""
            let data = await getQiniuToken();
            /* 获取七牛云的token成功 */
            if (data.data.status == 200) {
                baseStore.qiniuToken = data.data.data.uploadToken;
                let ress = await uploadqiniu(updatainfo.value.bkimg);
                if (ress.length !== 0) {
                    newimg = import.meta.env.VITE_API_PHOTO + ress[0].data.key
                    let result = await deleteimg({
                        oldimg: corver.split("/").pop(),
                    })
                }
                let res = await updataconfig({
                    name: updatainfo.value.name,
                    bkimg: newimg == "" ? corver : newimg,
                    sign: updatainfo.value.sign,
                    notice: updatainfo.value.notice,
                })
                if (res.data.status == 200) {
                   
                    ElMessage({
                        message: '修改成功',
                        type: 'success',
                    })
                    reload()
                } else {
                    ElMessage({
                        showClose: true,
                        message: '修改失败',
                        type: 'error',
                    })
                    return
                }
            }
    }
}
onMounted( async()=>{
    let res = await getconfig()
    console.log(res);
    if(res.data.status==200){
        let data = res.data.data
        siteinfo.value.name = data.data.Bolog_name
        siteinfo.value.sign = data.data.Bolog_sign
        siteinfo.value.notice = data.data.Bolog_notice
        siteinfo.value.bkimg = data.data.Bolog_bkimg
    }else{
        ElMessage({
            showClose: true,
            message: '获取信息失败',
            type: 'error',
        })
    }

})
</script>

<style lang="css" scoped>
.dd {
    max-height: 600px;
    width: 50%;
    transform: translate(50%, 20%);
}

.xx {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.touxiang {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.touxiang div:nth-child(1) {
    width: 15%;
    text-align: right;
    margin-right: 15px;
}

.box-card {
    padding: 10px;
    height: 100%;

    border: 0px !important;
}

:deep(.el-card__header) {
    padding: 5px 25px !important;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>